$(function() {
	getDta();
	//创建div用于显示 悬浮特效
	$("<div id='tooltip'></div>").css({
		position: "absolute",
		display: "none",
		border: "1px solid #fdd",
		padding: "2px",
		"background-color": "#fee",
		opacity: 0.80
	}).appendTo("body");
});
//获取数据
function getDta() {
	var saleData = [];
	$.ajax({
		type : 'post',
		url : basePath + 'datareport/forReport.do',
		async : false,
		dataType : 'json',
		success : function(res) {
			var sales = res.row;
			if (sales.length > 0) {
				var month;
				var preDate;
				for (var i = 0; i < sales.length; i++) {
					if(i==0){
						month = Number(sales[i].date);
						preDate = month;
					}else{
						month = changeDate(preDate,Number(sales[i].date));
						preDate = month;
					}
					saleData[i] = [ month, sales[i].profit ];
				}
			} else {
				$.messager.alert('错误', '获取数据失败!', 'warning');
			}
		}
	});

	lineChart(saleData);
	barGraph(saleData);
}

//跨年时间改变用于布局
function changeDate(preDate,thisDate){
	if(thisDate-preDate>0.01){
		return Math.round((thisDate-0.88)*100)/100 ;
	}else{
		return thisDate;
	}
}

//折线图
function lineChart(saleData) {
	$.plot($("#placeholder"), [ {
		label : '2014年利润折线统计',
		data : saleData
	} ],{
		series: {
			lines: {
				show: true
			},
			points: {
				show: true
			}
		},
		grid: {
			hoverable: true//鼠标悬浮功能
		},
		xaxis: {
			tickSize: 0.01,
			tickFormatter: function(axis) {
				var date = axis+"";
				var month = date.substring(5);
				 if(Number(month)>12){
					 return Math.round((axis+0.88)*100)/100;
				 }else{
					 return axis;
				 }
				}
		}
	});
	//悬浮特效
	$("#placeholder").bind("plothover", function (event, pos, item) {
		if (item) {
			var x = item.datapoint[0].toFixed(2),
				y = item.datapoint[1].toFixed(2);
			$("#tooltip").html(y)
				.css({top: item.pageY+10, left: item.pageX+10})
				.fadeIn(200);
		} else {
			$("#tooltip").hide();
		}
	});
}

//柱状图
function barGraph(saleData){
	$.plot($("#bar1"), [ {
		label : '2014年利润柱状统计图',
		data : saleData
	} ], {
		series : {
			color : '#333',
			abel : 'morris',
			stack : 0,
			lines : {
				fill : true,
				steps : false
			},
			point : {
				show : true
			},
			bars : {
				show : true,
				barWidth : 0.01
			}
		},
		bars : {
			align : "center",
			barWidth : 0.005
		},
		grid: {
			hoverable: true
		},
		xaxis: {
			tickSize: 0.01,
			tickFormatter: function(axis) {
				var date = axis+"";
				var month = date.substring(5);
				 if(Number(month)>12){
					 return Math.round((axis+0.88)*100)/100;
				 }else{
					 return axis;
				 }
				}
		}
	});
	
	$("#bar1").bind("plothover", function (event, pos, item) {
		if (item) {
			var x = item.datapoint[0].toFixed(2),
				y = item.datapoint[1].toFixed(2);
			$("#tooltip").html(y)
				.css({top: item.pageY+5, left: item.pageX+5})
				.fadeIn(200);
		} else {
			$("#tooltip").hide();
		}
	});
}

